<template>
    <div>
        <el-container>
            <!--编辑窗口-->
            <el-dialog title="修改管理员信息" :visible.sync="updateBox" width="50%" :close-on-click-modal="true" center>
                <div>
                    <el-form :model="updateForm" :rule="rulesEditAdminInfo" label-width="80px" ref="rulesEditAdminInfo">
                        <el-descriptions class="margin-top" title="" :column="1" >
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-admin"></i>
                                    管理员名
                                </template>
                                <el-form-item label="" prop="name">
                                <el-input v-if="updateBox" v-model="updateForm.name" style="width: 140px;"></el-input>
                                </el-form-item>
                            </el-descriptions-item>
                        </el-descriptions>
                        <div v-if="updateBox" style="margin-top: 20px;">
                            <el-button type="primary" @click="confirmEditAdminInfo">保存</el-button>
                        </div>
                    </el-form>
                </div>
            </el-dialog>
            <el-dialog :direction="direction" :visible.sync="updatePassBox" with-header="false" size="500px">
                <div class="password-change-page">
                    <h2>修改密码</h2>
                    <el-form :model="updatePassForm" status-icon :rules="rules" ref="updatePassForm" label-width="100px"
                        class="demo-ruleForm">
                        <el-form-item label="旧密码" prop="oldPassword">
                            <el-input type="password" v-model="updatePassForm.oldPassword" autocomplete="off"
                                show-password></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newPassword">
                            <el-input type="password" v-model="updatePassForm.newPassword" autocomplete="off"
                                show-password></el-input>
                        </el-form-item>
                        <el-form-item label="确认新密码" prop="confirmPassword">
                            <el-input type="password" v-model="updatePassForm.confirmPassword" autocomplete="off"
                                show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="confirmUpdatePass('updatePassForm')">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-dialog>
            <el-drawer :direction="direction" :visible.sync="drawerBox" :with-header="false" size="500px">
                <div style="display: flex;flex-direction: row; margin-top: 6px;margin-left: 8px;">
                    <div class="block">
                        <el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false"
                            accept=".jpg, .png" :limit="1" :http-request="uploadAvatar">
                            <el-avatar :size="50" :src="circleUrl"></el-avatar>
                            <!-- <i v-else class="el-icon-plus avatar-uploader-icon" /> -->
                        </el-upload>
                    </div>
                    <div style="margin: 10px;font-size: large; font-weight:bold;color:black;">管理员信息</div>
                    <div style="margin-left: 260px;">
                        <el-button @click="editAdminInfo" style="margin-top: 6px;" type="primary"
                            size="small">编辑</el-button>
                    </div>
                </div>
                <el-descriptions class="margin-top" title="" :column="1" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-admin"></i>
                            管理员名
                        </template>
                        <div style="width: 140px;">
                            {{ adminPersonalData.name }}
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </el-drawer>
            <el-drawer :direction="direction" :visible.sync="accountSafeBox" :with-header="false" size="500px">
                <div style="display: flex;flex-direction: row; margin-top: 20px;margin-left: 12px;margin-bottom: 10px;">
                    <div style="font-weight: bold;font-size: large;color: black;">
                        登录账号
                        <svg t="1735133274857" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4803" width="16" height="16">
                            <path
                                d="M512 1019.733333C231.594667 1019.733333 4.266667 792.405333 4.266667 512S231.594667 4.266667 512 4.266667 1019.733333 231.594667 1019.733333 512 792.405333 1019.733333 512 1019.733333z m0-76.8c237.994667 0 430.933333-192.938667 430.933333-430.933333 0-237.994667-192.938667-430.933333-430.933333-430.933333C274.005333 81.066667 81.066667 274.005333 81.066667 512c0 237.994667 192.938667 430.933333 430.933333 430.933333z"
                                fill="#51C41A" p-id="4804"></path>
                            <path
                                d="M181.418667 580.138667a44.288 44.288 0 0 1 0-61.312 41.301333 41.301333 0 0 1 59.605333 0l85.248 89.472c16.426667 16.938667 16.426667 44.416 0 61.354666a41.301333 41.301333 0 0 1-59.605333 0l-85.248-89.514666z m556.245333-255.402667a41.301333 41.301333 0 0 1 59.392-5.333333c17.834667 15.402667 20.138667 42.794667 5.162667 61.141333L395.52 751.445333a41.301333 41.301333 0 0 1-59.349333 5.333334 44.245333 44.245333 0 0 1-5.205334-61.141334l406.741334-370.901333z"
                                fill="#51C41A" p-id="4805"></path>
                        </svg>
                    </div>
                </div>
                <el-form :model="accountForm" status-icon ref="form" label-width="80px" style="width: 350px;">
                    <el-form-item label="登录账号" prop="email">
                        <el-input v-model="accountForm.account" :disabled="true"></el-input>
                    </el-form-item>

                    <el-form-item label="登录密码" prop="password" style="width: 446px;">
                        <div style="display: flex; align-items: center;">
                            <el-input :disabled="true" type="password" v-model="accountForm.password" autocomplete="off"
                                show-password></el-input>
                            <el-button @click="editAdminPass" style="margin-left: 15px" type="primary"
                                size="small">更改密码</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-drawer>
            <el-header class="header">
                <div class="con-main-f">
                    <svg style="margin-left: 20px; margin-top: 2px" t="1715878709147" class="icon"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4400" width="48"
                        height="48">
                        <path
                            d="M1019.211144 512.942488c0 281.360557-228.092179 509.452736-509.452736 509.452736-281.370746 0-509.452736-228.092179-509.452736-509.452736 0-281.365652 228.08199-509.452736 509.452736-509.452737 281.360557 0 509.452736 228.087085 509.452736 509.452737"
                            fill="#ffffff" p-id="4401" data-spm-anchor-id="a313x.search_index.0.i0.51293a81TTdvre"
                            class="selected">
                        </path>
                        <path
                            d="M495.391841 725.786746l43.466507 37.888H377.580896c-111.55996 0-201.99801-90.432955-201.99801-201.99801a200.979104 200.979104 0 0 1 23.332935-94.320079 202.731622 202.731622 0 0 1 59.656915-68.913672 201.590448 201.590448 0 0 1 44.261254-24.484298l-16.378905-14.274866-1.237971-1.08004L174.640398 262.210229h145.89198l110.586906 96.388458 12.81783 11.182487-0.463602 0.891542c0.840597 0.285294 1.671005 0.585871 2.501413 0.891543l93.983841 81.92H377.596179c-15.961154 0-31.127562 3.459184-44.780895 9.669413a108.48796 108.48796 0 0 0-59.386906 69.158209 108.411542 108.411542 0 0 0-4.024677 29.364855c0 4.503562 0.275104 8.94599 0.804936 13.312 6.566846 53.477254 52.142488 94.890667 107.387542 94.890667h53.655562l64.1401 55.907343z"
                            fill="#226DFF" p-id="4402"></path>
                        <path
                            d="M895.821692 763.674746h-145.897075L642.31801 669.879403l-4.834707-4.213174-63.732537-55.560916-40.287522-35.111482h88.288159c16.404378 0 31.968159-3.652776 45.901692-10.204338 28.962388-13.587104 50.919801-39.630328 58.964059-71.241871 2.170269-8.558806 3.326726-17.52008 3.326727-26.746269 0-4.508657-0.280199-8.951085-0.81003-13.317094-6.561751-53.472159-52.137393-94.880478-107.382448-94.880478h-49.951841L504.714826 300.123701l-43.497075-37.913472h161.343682c111.554866 0 201.99801 90.43805 201.99801 201.987821a200.989294 200.989294 0 0 1-23.363503 94.360836 202.818229 202.818229 0 0 1-60.747144 69.693134l4.335443 3.76995L895.821692 763.669652z"
                            fill="#1BD9A2" p-id="4403"></path>
                    </svg>
                    <div ref="logo" class="con-logo" @mouseenter="startLogoAnimation" @mouseleave="stopLogoAnimation">
                        Carot
                    </div>
                    <div class="con-logout-butt">
                        <el-button @click="logout" class="logout-butt">退出登录</el-button>
                    </div>
                    <h1></h1>
                </div>
            </el-header>
            <el-container>
                <el-aside class="aside-nav" width="180px">
                    <el-col :span="12">
                        <el-menu @select="handleSelect" router :default-active="$route.path" class="el-menu-vertical">
                            <el-submenu index="1">
                                <template slot="title">
                                    <span class="ell-butt">
                                        <svg t="1718354413474" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="2435" width="200" height="200">
                                            <path
                                                d="M512 74.666667c241.536 0 437.333333 195.797333 437.333333 437.333333S753.536 949.333333 512 949.333333 74.666667 753.536 74.666667 512 270.464 74.666667 512 74.666667z m0 64C305.813333 138.666667 138.666667 305.813333 138.666667 512S305.813333 885.333333 512 885.333333 885.333333 718.186667 885.333333 512 718.186667 138.666667 512 138.666667z m138.666667 170.666666a32 32 0 0 1 31.850666 28.928L682.666667 341.333333v106.666667a32 32 0 0 1-63.850667 3.072L618.666667 448v-106.666667a32 32 0 0 1 32-32z m-277.333334 0a32 32 0 0 1 31.850667 28.928L405.333333 341.333333v106.666667a32 32 0 0 1-63.850666 3.072L341.333333 448v-106.666667a32 32 0 0 1 32-32z"
                                                fill="#111111" p-id="2436"></path>
                                        </svg>
                                        个人中心
                                    </span>
                                </template>
                                <el-menu-item @click="openPersonalCard">
                                    <svg t="1718354493744" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="2772" width="200" height="200">
                                        <path
                                            d="M507.690667 106.666667h-12.245334l-5.461333 0.064c-107.050667 3.413333-190.549333 91.733333-190.549333 198.784v92.949333l0.085333 6.634667 0.384 7.274666c3.498667 50.773333 24.533333 97.536 59.434667 132.650667l40.085333 40.405333 0.597333 0.661334a2.837333 2.837333 0 0 1 0.32 1.322666l-0.042666 5.653334-278.08 134.357333-4.501334 2.304C83.754667 748.736 64 782.933333 64 819.776v9.450667l0.170667 6.485333C67.029333 881.28 104.533333 917.333333 150.570667 917.333333h701.525333C900.266667 917.333333 938.666667 877.994667 938.666667 830.208v-10.432l-0.106667-4.864a101.973333 101.973333 0 0 0-57.258667-87.061333L602.304 593.066667v-5.653334c0-0.746667 0.277333-1.386667 0.597333-1.706666l40.448-40.704a207.146667 207.146667 0 0 0 59.882667-145.941334V305.493333c0-109.44-87.189333-198.826667-195.541333-198.826666z m0 64c72.64 0 131.541333 60.373333 131.541333 134.826666v93.546667a143.146667 143.146667 0 0 1-41.301333 100.864l-40.469334 40.746667a66.410667 66.410667 0 0 0-19.136 46.762666v5.824c0 24.426667 13.738667 46.656 35.285334 57.045334l279.829333 135.168c12.949333 6.272 21.226667 19.626667 21.226667 34.346666v10.410667c0 12.8-10.112 23.125333-22.570667 23.125333H150.570667a22.826667 22.826667 0 0 1-22.528-21.632L128 819.776c0-13.866667 7.381333-26.602667 19.221333-33.28l2.837334-1.450667 278.997333-134.762666a63.018667 63.018667 0 0 0 34.986667-50.986667l0.256-4.565333 0.042666-7.317334c0-15.36-5.248-30.165333-14.805333-41.92l-3.264-3.733333-41.536-41.834667a143.018667 143.018667 0 0 1-41.216-95.722666l-0.085333-5.738667V305.493333c0-72.810667 56.426667-132.48 127.424-134.762666L495.445333 170.666667h12.245334z"
                                            fill="#000000" p-id="2773"></path>
                                        <path
                                            d="M949.333333 576v21.333333a21.333333 21.333333 0 0 1-21.333333 21.333334h-85.333333a21.333333 21.333333 0 0 1-21.333334-21.333334v-21.333333a21.333333 21.333333 0 0 1 21.333334-21.333333h85.333333a21.333333 21.333333 0 0 1 21.333333 21.333333zM949.333333 458.666667v21.333333a21.333333 21.333333 0 0 1-21.333333 21.333333h-149.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-21.333333a21.333333 21.333333 0 0 1 21.333334-21.333334h149.333333a21.333333 21.333333 0 0 1 21.333333 21.333334zM949.333333 341.333333v21.333334a21.333333 21.333333 0 0 1-21.333333 21.333333h-149.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-21.333334a21.333333 21.333333 0 0 1 21.333334-21.333333h149.333333a21.333333 21.333333 0 0 1 21.333333 21.333333z"
                                            fill="#000000" p-id="2774"></path>
                                    </svg>
                                    个人信息
                                </el-menu-item>
                                <el-menu-item @click="openAccountSafe">
                                    <svg t="1718354446846" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="2603" width="200" height="200">
                                        <path
                                            d="M714.666667 100.885333l137.6 25.024A79.274667 79.274667 0 0 1 917.333333 203.904v487.978667a79.274667 79.274667 0 0 1-38.293333 67.861333L573.44 944.234667a118.890667 118.890667 0 0 1-122.922667 0L144.96 759.744A79.274667 79.274667 0 0 1 106.666667 691.904V203.882667a79.274667 79.274667 0 0 1 65.066666-77.994667L309.333333 100.906667a1132.117333 1132.117333 0 0 1 405.333334 0z m-11.456 62.954667a1068.117333 1068.117333 0 0 0-382.421334 0l-137.6 25.045333A15.274667 15.274667 0 0 0 170.666667 203.904v487.978667c0 5.333333 2.794667 10.304 7.381333 13.077333l305.578667 184.490667a54.890667 54.890667 0 0 0 56.746666 0l305.578667-184.490667a15.274667 15.274667 0 0 0 7.381333-13.077333V203.904a15.274667 15.274667 0 0 0-12.522666-15.018667l-137.6-25.045333z"
                                            fill="#111111" p-id="2604"></path>
                                        <path
                                            d="M707.050667 353.194667a32 32 0 0 1 43.029333 47.36l-207.893333 188.928a122.069333 122.069333 0 0 1-167.210667-2.837334l-87.957333-85.525333a32 32 0 0 1 44.629333-45.866667l87.957333 85.504a58.069333 58.069333 0 0 0 79.530667 1.344l207.914667-188.906666z"
                                            fill="#111111" p-id="2605"></path>
                                    </svg>
                                    账号安全
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item index="/adminWorkplace/adminStore">
                                <svg t="1718354380295" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2266" width="200" height="200">
                                    <path
                                        d="M821.909333 85.333333c12.842667 0 22.485333 6.4 28.906667 16l105.962667 204.8c2.645333 5.226667 3.114667 19.050667 3.2 25.642667L960 418.133333c0 80-67.434667 147.2-147.733333 147.2h-41.749334c-48.170667 0-86.698667-16-112.405333-41.6-25.685333 28.8-70.634667 44.8-125.226667 44.8h-41.749333c-54.613333 0-99.562667-16-125.248-44.8-25.706667 28.8-64.234667 44.8-112.426667 44.8H211.754667C131.413333 568.533333 64 501.333333 64 421.333333v-81.28c0.042667-4.842667 0.32-17.706667 3.2-24.32l83.52-208c3.2-12.8 16.042667-22.4 28.885333-22.4h642.304z m-18.325333 64H202.944l-74.773333 186.24-0.106667 1.706667-0.064 2.773333v81.28c0 44.586667 38.741333 83.2 83.733333 83.2h41.749334c30.144 0 51.413333-8.554667 64.64-23.402666l47.765333-53.546667 47.744 53.546667c12.117333 13.589333 39.616 23.402667 77.504 23.402666h41.749333c37.866667 0 65.365333-9.813333 77.482667-23.402666l45.013333-50.474667 47.914667 47.744c14.293333 14.229333 37.12 22.933333 67.221333 22.933333h41.749334c45.013333 0 83.733333-38.613333 83.733333-83.2v-83.2l-0.021333-3.477333-0.170667-3.904L803.584 149.333333zM867.818667 600.64a32 32 0 0 1 32 32V832a96 96 0 0 1-96 96H221.141333a96 96 0 0 1-96-96v-199.36a32 32 0 0 1 64 0V832a32 32 0 0 0 32 32h582.677334a32 32 0 0 0 32-32v-199.36a32 32 0 0 1 32-32z"
                                        fill="#111111" p-id="2267"></path>
                                    <path d="M910.506667 288v64H83.52v-64z" fill="#111111" p-id="2268"></path>
                                </svg>
                                <span class="title-nav" slot="title">店铺管理</span>
                            </el-menu-item>
                            <el-menu-item index="/adminWorkplace/adminUser">
                                <svg t="1719015821996" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2139" width="200" height="200">
                                    <path
                                        d="M507.690667 106.666667h-12.245334l-5.461333 0.064c-107.050667 3.413333-190.549333 91.733333-190.549333 198.784v92.949333l0.085333 6.634667 0.384 7.274666c3.498667 50.773333 24.533333 97.536 59.434667 132.650667l40.085333 40.405333 0.597333 0.661334a2.837333 2.837333 0 0 1 0.32 1.322666l-0.042666 5.653334-278.08 134.357333-4.501334 2.304C83.754667 748.736 64 782.933333 64 819.776v9.450667l0.170667 6.485333C67.029333 881.28 104.533333 917.333333 150.570667 917.333333h701.525333C900.266667 917.333333 938.666667 877.994667 938.666667 830.208v-10.432l-0.106667-4.864a101.973333 101.973333 0 0 0-57.258667-87.061333L602.304 593.066667v-5.653334c0-0.746667 0.277333-1.386667 0.597333-1.706666l40.448-40.704a207.146667 207.146667 0 0 0 59.882667-145.941334V305.493333c0-109.44-87.189333-198.826667-195.541333-198.826666z m0 64c72.64 0 131.541333 60.373333 131.541333 134.826666v93.546667a143.146667 143.146667 0 0 1-41.301333 100.864l-40.469334 40.746667a66.410667 66.410667 0 0 0-19.136 46.762666v5.824c0 24.426667 13.738667 46.656 35.285334 57.045334l279.829333 135.168c12.949333 6.272 21.226667 19.626667 21.226667 34.346666v10.410667c0 12.8-10.112 23.125333-22.570667 23.125333H150.570667a22.826667 22.826667 0 0 1-22.528-21.632L128 819.776c0-13.866667 7.381333-26.602667 19.221333-33.28l2.837334-1.450667 278.997333-134.762666a63.018667 63.018667 0 0 0 34.986667-50.986667l0.256-4.565333 0.042666-7.317334c0-15.36-5.248-30.165333-14.805333-41.92l-3.264-3.733333-41.536-41.834667a143.018667 143.018667 0 0 1-41.216-95.722666l-0.085333-5.738667V305.493333c0-72.810667 56.426667-132.48 127.424-134.762666L495.445333 170.666667h12.245334z"
                                        fill="#000000" p-id="2140"></path>
                                    <path
                                        d="M949.333333 576v21.333333a21.333333 21.333333 0 0 1-21.333333 21.333334h-85.333333a21.333333 21.333333 0 0 1-21.333334-21.333334v-21.333333a21.333333 21.333333 0 0 1 21.333334-21.333333h85.333333a21.333333 21.333333 0 0 1 21.333333 21.333333zM949.333333 458.666667v21.333333a21.333333 21.333333 0 0 1-21.333333 21.333333h-149.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-21.333333a21.333333 21.333333 0 0 1 21.333334-21.333334h149.333333a21.333333 21.333333 0 0 1 21.333333 21.333334zM949.333333 341.333333v21.333334a21.333333 21.333333 0 0 1-21.333333 21.333333h-149.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-21.333334a21.333333 21.333333 0 0 1 21.333334-21.333333h149.333333a21.333333 21.333333 0 0 1 21.333333 21.333333z"
                                        fill="#000000" p-id="2141"></path>
                                </svg>
                                <span class="title-nav" slot="title">用户管理</span>
                            </el-menu-item>
                            <el-menu-item index="/adminWorkplace/adminMange">
                                <svg t="1735117320824" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2571" width="200" height="200">
                                    <path
                                        d="M537.216 1003.776h-427.52c-27.072 0-52.8-11.456-70.592-31.296a76.352 76.352 0 0 1-19.904-58.88l-0.192-60.16a32 32 0 0 1 64 0v63.872c-0.384 5.44 0.576 8.832 3.968 12.608a30.656 30.656 0 0 0 22.72 9.856h427.52a32 32 0 0 1 0 64z"
                                        fill="#231815" p-id="2572"></path>
                                    <path
                                        d="M50.752 934.144a32 32 0 0 1-32-32v-60.032a457.536 457.536 0 0 1 277.952-421.12 32.192 32.192 0 0 1 42.048 16.832 32.128 32.128 0 0 1-16.896 42.112 393.408 393.408 0 0 0-239.104 362.24v60.032a32 32 0 0 1-32 31.936z"
                                        fill="#231815" p-id="2573"></path>
                                    <path
                                        d="M460.736 514.496a247.36 247.36 0 0 1-247.104-247.104A247.424 247.424 0 0 1 460.736 20.224a247.424 247.424 0 0 1 247.168 247.168 247.36 247.36 0 0 1-247.168 247.104z m0-430.272a183.36 183.36 0 0 0-183.104 183.168 183.296 183.296 0 0 0 183.104 183.104 183.36 183.36 0 0 0 183.168-183.104 183.36 183.36 0 0 0-183.168-183.168zM778.56 829.376c-42.944 0-77.888-34.944-77.888-77.888s34.944-77.888 77.888-77.888 77.888 34.944 77.888 77.888-34.944 77.888-77.888 77.888z m0-110.976a33.216 33.216 0 1 0 0.064 66.368 33.216 33.216 0 0 0-0.064-66.368z"
                                        fill="#231815" p-id="2574"></path>
                                    <path
                                        d="M834.56 960.384a22.4 22.4 0 0 1-22.144-19.2 35.2 35.2 0 0 0-34.56-30.208c-17.152 0-32 12.864-34.624 30.016a22.272 22.272 0 0 1-28.736 17.984 217.536 217.536 0 0 1-84.352-49.344 22.4 22.4 0 0 1 1.28-33.728 35.136 35.136 0 0 0 8.32-44.864 35.84 35.84 0 0 0-42.88-15.04 22.4 22.4 0 0 1-29.76-15.936c-3.712-16.448-5.632-32.768-5.632-48.64s1.92-32.192 5.632-48.64a22.144 22.144 0 0 1 11.2-14.72 22.528 22.528 0 0 1 18.496-1.216 34.944 34.944 0 1 0 34.56-59.968 22.336 22.336 0 0 1-8.192-16.64 21.248 21.248 0 0 1 6.976-16.96 217.472 217.472 0 0 1 84.352-49.28 22.4 22.4 0 0 1 28.672 18.048 35.328 35.328 0 0 0 34.624 29.952 35.2 35.2 0 0 0 34.56-30.208 22.4 22.4 0 0 1 28.608-18.304 217.6 217.6 0 0 1 85.248 49.088 22.336 22.336 0 0 1-1.472 34.048 34.88 34.88 0 0 0-8.896 45.056 35.84 35.84 0 0 0 43.776 14.784 22.592 22.592 0 0 1 30.208 15.552 214.336 214.336 0 0 1 0 98.816 22.592 22.592 0 0 1-30.336 15.552 35.456 35.456 0 0 0-43.648 14.72 35.008 35.008 0 0 0 8.96 45.184 22.4 22.4 0 0 1 1.408 34.048 218.368 218.368 0 0 1-85.312 49.024 19.584 19.584 0 0 1-6.336 1.024z m-56.768-94.144c30.144 0 57.024 17.216 70.592 42.752 10.624-4.736 20.864-10.624 30.528-17.536a79.232 79.232 0 0 1-1.728-82.56 81.024 81.024 0 0 1 72.832-39.744 164.16 164.16 0 0 0 0-35.264 81.28 81.28 0 0 1-72.768-39.68 80.128 80.128 0 0 1 1.792-82.496 166.336 166.336 0 0 0-30.656-17.664c-13.504 25.6-40.448 42.816-70.592 42.816-29.824 0-56.64-17.024-70.336-42.304a179.072 179.072 0 0 0-30.336 17.792c15.104 24.384 16.256 55.68 1.28 81.792-14.528 25.216-43.008 42.432-71.296 39.872a147.776 147.776 0 0 0 0 35.008 83.84 83.84 0 0 1 71.296 39.744c15.04 26.24 13.888 57.536-1.216 81.92 9.472 6.976 19.648 12.928 30.336 17.792 13.696-25.216 40.512-42.24 70.272-42.24z"
                                        fill="#231815" p-id="2575"></path>
                                </svg>
                                <span class="title-nav" slot="title">管理员管理</span>
                            </el-menu-item>
                            <el-menu-item index="/adminWorkplace/adminMessage">
                                <svg t="1735117367038" class="icon-nav" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="3601" width="200" height="200">
                                    <path
                                        d="M512 68.266667C268.049067 68.266667 68.266667 238.08 68.266667 450.56l0.068266 6.638933c2.833067 143.445333 97.723733 270.4384 241.408 333.789867l4.778667 2.048V921.6l0.1024 2.6112c1.8944 26.504533 32.768 41.0624 54.545067 24.661333l154.4192-116.155733 3.003733-0.068267C763.869867 826.043733 955.733333 658.7904 955.733333 450.56 955.733333 238.08 755.950933 68.266667 512 68.266667z m0 68.266666c208.4864 0 375.466667 141.9264 375.466667 314.026667 0 172.100267-166.980267 314.026667-375.466667 314.026667l-3.157333 0.1536a34.133333 34.133333 0 0 0-17.3568 6.7072l-108.6976 81.732266v-83.2512a34.133333 34.133333 0 0 0-22.289067-32.017066C224.938667 687.735467 136.533333 575.317333 136.533333 450.56 136.533333 278.459733 303.5136 136.533333 512 136.533333z"
                                        fill="#444444" p-id="3602"></path>
                                    <path
                                        d="M290.133333 477.866667a34.133333 34.133333 0 0 1 30.344534 18.500266l-1.621334-2.423466c38.126933 58.7776 95.8976 92.8256 165.512534 94.72l6.161066 0.085333v68.266667c-93.866667 0-173.687467-44.373333-225.3824-120.541867l-3.566933-5.358933 0.170667-0.119467A34.133333 34.133333 0 0 1 290.133333 477.866667z"
                                        fill="#00B386" p-id="3603"></path>
                                </svg>
                                <span class="title-nav" slot="title">消息管理</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-aside>
                <el-main class="con-main" id="monitor-main-box">
                    <div class="con-dashboard-logo">
                        <svg style="margin-right: 6px;  margin-top: 6px;" t="1718903819935" class="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6854"
                            width="26" height="26">
                            <path
                                d="M1023.8 604.7c0 160.9-129 291.3-287.9 291.3H256.1C113.3 888.5 0.2 781.3 0.2 650.7c0-99.4 65.6-185 159.9-223.5 19.7-8 33.8-25.5 38.2-46.3C224.9 254.9 340.8 160 480 160c102.6 0 192.4 51.5 243.4 129 10 15.3 26.1 25.5 44.2 28.2 145.2 22 256.2 142.1 256.2 287.5z"
                                p-id="6855" fill="#8a8a8a"></path>
                        </svg>
                        <span class="dashboard-logo">Dashboard</span>
                    </div>
                    <div class="con-main-s">
                        <router-view></router-view>
                    </div>
                    <el-backtop :right="50" :bottom="50" target="#monitor-main-box" :visibility-height="50">
                    </el-backtop>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import "animate.css";
import { request } from "@/network/request/request";
export default {
    name: "WorkPlaceView",
    mounted() {
        this.getAvatar();
    },
    data() {
        // 验证规则
        var validateConfirmPassword = (rule, value, callback) => {
            if (value !== this.updatePassForm.newPassword) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        var validateConfirmOldPassword = (rule, value, callback) => {
            if (value !== this.accountForm.password) {
                callback(new Error('密码不正确!'));
            } else {
                callback();
            }
        };
        return {
            rulesEditAdminInfo: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
            },
            logo: "Carot",
            storeId: "",
            box: true,
            options: [],
            storedName: "",
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            drawerBox: false,
            accountSafeBox: false,
            updateBox: false,
            updatePassBox: false,
            direction: "ltr",
            updateForm: {
                name: '',
                account: '',
                avatar: '',
            },
            accountForm: {
                account: localStorage.getItem("account"),
                password: localStorage.getItem("password"),
            },
            updatePassForm: {
                account: '',
                oldPassword: '',
                newPassword: '',
                confirmPassword: '',
            },
            adminPersonalData: {
                name: '',
                account: '',
                avatar: '',
            },
            form: {
                //头像
                avatar: 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png',//回显头像
            },
            rules: {
                oldPassword: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' },
                    { validator: validateConfirmOldPassword, trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, message: '请再次输入新密码', trigger: 'blur' },
                    { validator: validateConfirmPassword, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            // this.$router.push(key);
            console.log(key + " " + keyPath);
        },
        async handleSelectChange(newId) {
            localStorage.setItem("storeId", newId);
            const params = {
                storeId: newId,
            };
            const config = {
                url: "api/user/store/getStoreById",
                method: "get",
                params: params,
            };
            const res = await request(config);
            if (res.data.code === 1) {
                localStorage.setItem("storeName", res.data.data.storeName);
                this.storeName = res.data.data.storeName;
            }
            const childComponent = this.$refs.childComponent;
            if (childComponent) {
                // 调用子组件的方法
                childComponent.findData();
                // 更新子组件的数据（前提是子组件数据是响应式的，例如通过Vue的data、computed等定义的）
                childComponent.childData = '新的数据值';
            }
            this.$message.success("店铺切换成功" + newId);
        },
        async uploadAvatar(data) {
            const imgData = new FormData()
            console.log(data.file);
            imgData.append('file', data.file)
            imgData.append("account", localStorage.getItem("account"));
            const config = {
                method: "post",
                url: "api/user/upload",
                data: imgData,
            };
            request(config).then((res) => {
                // 处理成功后的逻辑
                if (res.data.code === 1) {
                    console.log("头像读取成功");
                    this.form.avatar = res.data.data;
                    this.circleUrl = res.data.data;
                    console.log("清除文件上传成功")
                    this.$refs["upload"].clearFiles() //上传成功之后清除历史记录
                    this.updateAvatar();
                } else {
                    this.error.$message.error(res.data.msg);
                }
            })
        },
        startLogoAnimation() {
            // 添加动画类
            this.$refs.logo.classList.add("animate__animated", "animate__swing");
        },
        stopLogoAnimation() {
            // 移除动画类
            const toRemove = ["animate__animated", "animate__swing"];
            toRemove.forEach((className) => {
                this.$refs.logo.classList.remove(className);
            });
        },
        logout() {
            localStorage.removeItem("account");   
            localStorage.removeItem("token");                 /******** */
            this.$router.push("/home");
        },
        openPersonalCard() {
            this.drawerBox = true;
        },
        updateAvatar() {
            const config = {
                url: "api/admin/avatar",
                method: "put",
                data: {
                    account: localStorage.getItem("account"),
                    avatar: this.form.avatar,
                }
            };
            request(config)
                .then((res) => {
                    if (res.data.code === 1) {
                        this.$message.success("头像修改成功");
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getAvatar() {
            const params = {
                account: localStorage.getItem("account"),
            };
            const config = {
                url: "api/admin/getAdmin",
                method: "get",
                params: params,
            };
            request(config)
                .then((res) => {
                    if (res.data.code === 1) {
                        this.circleUrl = res.data.data.avatar;
                        this.adminPersonalData = res.data.data;
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        editAdminInfo() {
            this.updateBox = true
            const admin = this.adminPersonalData;
            this.updateForm.name = admin.name
        },
        confirmEditAdminInfo() {
            const config = {
                url: "api/admin/update",
                method: "put",
                data: {
                    account: localStorage.getItem("account"),
                    name: this.updateForm.name,
                }
            };
            request(config)
                .then((res) => {
                    if (res.data.code === 1) {
                        this.$message.success("管理员个人信息修改成功");
                        this.adminPersonalData.name = this.updateForm.name;
                        this.updateBox = false;
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        openAccountSafe() {
            this.accountSafeBox = true;
        },
        editAdminPass() {
            this.updatePassBox = true;
        },
        confirmUpdatePass(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 发送请求到服务器
                    const config = {
                        url: "api/admin/update-pass",
                        method: "put",
                        data: {
                            account: this.accountForm.account,
                            newPassword: this.updatePassForm.confirmPassword,
                        },
                    };
                    request(config)
                        .then((res) => {
                            if (res.data.code === 1) {
                                this.$message.success("密码修改成功");
                                this.accountForm.password = this.updatePassForm.confirmPassword;
                                localStorage.setItem("password", this.updatePassForm.confirmPassword);
                                this.updatePassBox = false;
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        }
    },
};
</script>
<style scoped>
body {
    color: rgb(255, 255, 255);
    margin: 0px;
    font-family: "微软雅黑", "PingFangM", Arial, sans-serif;
}

.icon-nav {
    margin-right: 5px;
    width: 26px;
    height: 20px;
}

/* logo样式 */
.logo-span {
    color: black;
    margin-top: 15px;
    font-size: 26px;
    font-weight: bold;
}

/* 侧边栏按钮样式 */
.el-menu-vertical {
    width: 180px;
    margin-top: 40px;
}

.centerContainer {
    display: flex;
    align-content: center;
    /* justify-content: center; */
}

.el-container {
    height: calc(100vh - 100px);
}

.header {
    border: 1px solid #f6f7f8;
}

.main {
    background-color: rgb(223, 222, 222);
    height: 605px;
}

.con-main {
    background-color: #f4f6fa;
    border-radius: 1px;
    height: 605px;
    padding: 0;
}

.con-main-f {
    display: flex;
    height: 50px;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0px;
    width: 100%;
    z-index: 999;
}

.con-main-s {
    max-height: 8000px;
    overflow-y: auto;
    background-color: #ffff;
    margin-left: 32px;
    margin-bottom: 32px;
    margin-right: 40px;
    margin-top: 20px;
    border: 1px solid #e9ebef;
    padding: 20px;
    border-radius: 10px;
}

.aside-nav {
    background-color: #ffffff;
    color: #fff;
    height: 605px;
    padding: 0;
}

.el-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    font-family: "微软雅黑", sans-serif;
    font-size: 15px;
}

.ell-butt {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    font-family: "微软雅黑", sans-serif;
    font-size: 16px;
}

:hover.ell-butt {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    font-family: "微软雅黑", sans-serif;
    font-size: large;
}

.el-menu-item:active {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    font-family: "微软雅黑", sans-serif;
    font-size: large;
    background-color: #eaf6ff;
}

.el-menu-item:focus {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    font-family: "微软雅黑", sans-serif;
    font-size: large;
}

:hover.el-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    text-align: center;
    font-family: "微软雅黑", sans-serif;
    font-size: large;
    background-color: #eaf6ff !important;
}

.el-menu::after {
    clear: none;
}

.con-dashboard-logo {
    color: #989999;
    margin-left: 36px;
    margin-top: 18px;
    display: flex;
    align-content: center;
}

.dashboard-logo {
    font-weight: bold;
    display: flex;
    align-content: center;
    margin-top: 10px;
}

.con-logout-butt {
    display: flex;
    justify-content: right;
    width: 1050px;
    color: #030303;
}

.logout-butt {
    color: #73c8fc;
    background-color: transparent;
    border: 0px;
}

:hover.logout-butt {
    color: #f97676;
    background-color: transparent;
    border: 0px;
}

.con-logo {
    display: flex;
    justify-content: center;
    align-content: center;
    color: #252c48;
    font-weight: bold;
    font-size: 24px;
    margin: 12px;
}
</style>